﻿<!DOCTYPE html>
<html>
  <head>
    <title>颜色选择器 Color Picker</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/______color_picker/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/______color_picker/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (Rectangle) -->
      <div id="u8458" class="ax_default _默认样式">
        <div id="u8458_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8459" class="ax_default _默认样式">
        <div id="u8459_div" class=""></div>
        <div id="u8459_text" class="text ">
          <p><span>选择颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u8461" class="ax_default" data-label="背景">
        <div id="u8461_state0" class="panel_state" data-label="State1" style="">
          <div id="u8461_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u8462" class="ax_default" data-label="线条">
        <div id="u8462_state0" class="panel_state" data-label="State1" style="">
          <div id="u8462_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8463" class="ax_default _默认样式">
        <div id="u8463_div" class=""></div>
        <div id="u8463_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8464" class="ax_default _默认样式">
        <div id="u8464_div" class=""></div>
        <div id="u8464_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u8466" class="ax_default _默认样式">
        <img id="u8466_img" class="img " src="images/___icons/u605.png"/>
        <div id="u8466_text" class="text ">
          <p><span>Copyright © </span><a id="u8467" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8468" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="90">

        <!-- Unnamed (Rectangle) -->
        <div id="u8469" class="ax_default _默认样式">
          <div id="u8469_div" class=""></div>
          <div id="u8469_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">用于颜色选择，支持多种颜色格式，支持颜色预设。提供相关静态元件示例，可根据实际需求进行扩展。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8470" class="ax_default _默认样式">
          <div id="u8470_div" class=""></div>
          <div id="u8470_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8471" class="ax_default _默认样式">
        <div id="u8471_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8472" class="ax_default _默认样式">
        <div id="u8472_div" class=""></div>
        <div id="u8472_text" class="text ">
          <p><span>状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8473" class="ax_default _默认样式">
        <div id="u8473_div" class=""></div>
        <div id="u8473_text" class="text ">
          <p><span>默认状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8474" class="ax_default" data-left="289" data-top="320" data-width="80" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u8475" class="ax_default _默认样式">
          <div id="u8475_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8476" class="ax_default _默认样式">
          <div id="u8476_div" class=""></div>
          <div id="u8476_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8477" class="ax_default _默认样式">
          <div id="u8477_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8478" class="ax_default _默认样式">
        <div id="u8478_div" class=""></div>
        <div id="u8478_text" class="text ">
          <p><span>悬停状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8479" class="ax_default" data-left="289" data-top="380" data-width="80" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u8480" class="ax_default _默认样式">
          <div id="u8480_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8481" class="ax_default _默认样式">
          <div id="u8481_div" class=""></div>
          <div id="u8481_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8482" class="ax_default _默认样式">
          <div id="u8482_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8483" class="ax_default" data-left="727" data-top="291" data-width="260" data-height="309">

        <!-- Unnamed (Group) -->
        <div id="u8484" class="ax_default" data-left="727" data-top="291" data-width="80" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u8485" class="ax_default _默认样式">
            <div id="u8485_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8486" class="ax_default _默认样式">
            <div id="u8486_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8487" class="ax_default _默认样式">
            <div id="u8487_div" class=""></div>
            <div id="u8487_text" class="text ">
              <p><span></span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u8488" class="ax_default" data-left="727" data-top="332" data-width="260" data-height="268">

          <!-- Unnamed (Rectangle) -->
          <div id="u8489" class="ax_default _默认样式">
            <div id="u8489_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8490" class="ax_default _默认样式">
            <div id="u8490_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8491" class="ax_default _默认样式">
            <div id="u8491_div" class=""></div>
            <div id="u8491_text" class="text ">
              <p><span>清空</span></p>
            </div>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8492" class="ax_default image">
            <img id="u8492_img" class="img " src="images/______color_picker/u8492.png"/>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8493" class="ax_default image">
            <img id="u8493_img" class="img " src="images/______color_picker/u8493.png"/>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8494" class="ax_default _默认样式">
            <div id="u8494_div" class=""></div>
            <div id="u8494_text" class="text ">
              <p><span>确定</span></p>
            </div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8495" class="ax_default _默认样式">
            <div id="u8495_div" class=""></div>
            <div id="u8495_text" class="text ">
              <p><span>#19BE6B</span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8496" class="ax_default _默认样式">
        <div id="u8496_div" class=""></div>
        <div id="u8496_text" class="text ">
          <p><span>选择状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8497" class="ax_default" data-left="289" data-top="440" data-width="80" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u8498" class="ax_default _默认样式">
          <div id="u8498_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8499" class="ax_default _默认样式">
          <div id="u8499_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8500" class="ax_default _默认样式">
          <div id="u8500_div" class=""></div>
          <div id="u8500_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8501" class="ax_default _默认样式">
        <div id="u8501_div" class=""></div>
        <div id="u8501_text" class="text ">
          <p><span>无默认值：</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8502" class="ax_default" data-left="289" data-top="500" data-width="80" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u8503" class="ax_default _默认样式">
          <div id="u8503_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8504" class="ax_default _默认样式">
          <div id="u8504_div" class=""></div>
          <div id="u8504_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u8505" class="ax_default _默认样式">
          <div id="u8505_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8506" class="ax_default _默认样式">
        <div id="u8506_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8507" class="ax_default _默认样式">
        <div id="u8507_div" class=""></div>
        <div id="u8507_text" class="text ">
          <p><span>预置颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8508" class="ax_default" data-left="137" data-top="747" data-width="260" data-height="353">

        <!-- Unnamed (Group) -->
        <div id="u8509" class="ax_default" data-left="137" data-top="747" data-width="80" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u8510" class="ax_default _默认样式">
            <div id="u8510_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8511" class="ax_default _默认样式">
            <div id="u8511_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8512" class="ax_default _默认样式">
            <div id="u8512_div" class=""></div>
            <div id="u8512_text" class="text ">
              <p><span></span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u8513" class="ax_default" data-left="137" data-top="788" data-width="260" data-height="312">

          <!-- Unnamed (Rectangle) -->
          <div id="u8514" class="ax_default _默认样式">
            <div id="u8514_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8515" class="ax_default _默认样式">
            <div id="u8515_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8516" class="ax_default _默认样式">
            <div id="u8516_div" class=""></div>
            <div id="u8516_text" class="text ">
              <p><span>清空</span></p>
            </div>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8517" class="ax_default image">
            <img id="u8517_img" class="img " src="images/______color_picker/u8492.png"/>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8518" class="ax_default image">
            <img id="u8518_img" class="img " src="images/______color_picker/u8493.png"/>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8519" class="ax_default _默认样式">
            <div id="u8519_div" class=""></div>
            <div id="u8519_text" class="text ">
              <p><span>确定</span></p>
            </div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8520" class="ax_default _默认样式">
            <div id="u8520_div" class=""></div>
            <div id="u8520_text" class="text ">
              <p><span>#19BE6B</span></p>
            </div>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8521" class="ax_default image">
            <img id="u8521_img" class="img " src="images/______color_picker/u8521.png"/>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8522" class="ax_default _默认样式">
        <div id="u8522_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u8523" class="ax_default _默认样式">
        <div id="u8523_div" class=""></div>
        <div id="u8523_text" class="text ">
          <p><span>透明选项</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u8524" class="ax_default" data-left="735" data-top="747" data-width="260" data-height="329">

        <!-- Unnamed (Group) -->
        <div id="u8525" class="ax_default" data-left="735" data-top="747" data-width="80" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u8526" class="ax_default _默认样式">
            <div id="u8526_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8527" class="ax_default _默认样式">
            <div id="u8527_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8528" class="ax_default _默认样式">
            <div id="u8528_div" class=""></div>
            <div id="u8528_text" class="text ">
              <p><span></span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u8529" class="ax_default" data-left="735" data-top="788" data-width="260" data-height="288">

          <!-- Unnamed (Rectangle) -->
          <div id="u8530" class="ax_default _默认样式">
            <div id="u8530_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8531" class="ax_default _默认样式">
            <div id="u8531_div" class=""></div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8532" class="ax_default _默认样式">
            <div id="u8532_div" class=""></div>
            <div id="u8532_text" class="text ">
              <p><span>清空</span></p>
            </div>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8533" class="ax_default image">
            <img id="u8533_img" class="img " src="images/______color_picker/u8492.png"/>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8534" class="ax_default image">
            <img id="u8534_img" class="img " src="images/______color_picker/u8493.png"/>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8535" class="ax_default _默认样式">
            <div id="u8535_div" class=""></div>
            <div id="u8535_text" class="text ">
              <p><span>确定</span></p>
            </div>
          </div>

          <!-- Unnamed (Rectangle) -->
          <div id="u8536" class="ax_default _默认样式">
            <div id="u8536_div" class=""></div>
            <div id="u8536_text" class="text ">
              <p><span>rgba(22,198,110,0.41)</span></p>
            </div>
          </div>

          <!-- Unnamed (Image) -->
          <div id="u8537" class="ax_default image">
            <img id="u8537_img" class="img " src="images/______color_picker/u8537.png"/>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
